<template>
  <div class="page-container">
    <van-image  :src="resources.bgTop" class="bg-top" />

    <div class="msg-box">
      <van-row    class="row1" >
        <van-col span="24" class="back">
          <van-icon name="arrow-left" @click="handleBackHome"/>
          <span class="center-title">个人中心</span>
        </van-col>
      </van-row>
      <van-row    class="row2" >
        <van-col span="12">
          <van-image
            round
            width="3rem"
            height="3rem"
            :src="avatarUrl"
          />
          <span class="text-code" style="top: 35%">{{user.code}}</span>
        </van-col>

        <van-col span="12">
          <span class="text-name">{{user.name}}</span>
        </van-col>
      </van-row>
      <van-row  class="rowinfo"  >
        <van-col span="24">
          <van-cell title="打印服务器" is-link @click="btnOp(22)" :value="printerName">
            <template #title>
              <van-image  :src="resources.exit" class="icon-left"  />
              <span class="icon-left-text">打印服务器</span>
            </template>
            <template #right-icon>
            </template>
          </van-cell>

          <van-cell title="打印机" is-link @click="btnOp(44)"  :value="printerNameTo">
            <template #title>
              <van-image  :src="resources.exit" class="icon-left"  />
              <span class="icon-left-text">打印机</span>
            </template>
            <template #right-icon>
            </template>
          </van-cell>

          <van-cell title="退出登录" is-link @click="btnOp(3)">
            <template #title>
              <van-image  :src="resources.exit" class="icon-left"  />
              <span class="icon-left-text">退出登录</span>
            </template>
            <template #right-icon>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>

    <!--打印服务器选择-->
    <van-popup position="bottom" closeable v-model="selectVisible" >
      <van-sticky :offset-top="0">
        <van-field ref="searchValue" autofocus="true"   label="搜索" placeholder="请输入" v-model="searchValue"  @input="handlePageSearch"/>
      </van-sticky>
      <van-radio-group v-model="printerId" @change="printCheckChange">
        <van-cell-group>
          <van-cell v-for="item in searchedList" @click="printCheckChange2(item)" :key="item.id" :title="item.name" clickable >
            <template #right-icon>
              <van-radio :name="item.id" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>


    <!--使用说明-->
    <van-popup position="bottom" closeable v-model="selectVisible2" >
      <p>
        1、主页面左右滑动，切换底部菜单。
      </p>
      <p>
        2、子页面左右滑动，返回上一操作界面。
      </p>

    </van-popup>


    <!--打印机选择-->
    <van-popup position="bottom" closeable v-model="selectVisible3" >
      <van-sticky :offset-top="0">
        <van-field ref="searchValue" autofocus="true"   label="搜索" placeholder="请输入" v-model="searchValue3"  @input="handlePageSearch3"/>
      </van-sticky>
      <van-radio-group v-model="printerId3" @change="printCheckChange3">
        <van-cell-group>
          <van-cell v-for="item in searchedList3" @click="printCheckChange33(item)" :key="item.name" :title="item.name" clickable >
            <template #right-icon>
              <van-radio :name="item.name" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>
<script>
/*eslint-disable*/
import {Dialog} from "vant"
import {getLodop} from '@/util/lodop/LodopFuncs.js'
import LodopModel from '@/util/lodop/LodopModel.js'

export default {
  data() {
    return {
      user: {},
      selectVisible: false,
      selectVisible2: false,
      selectVisible3: false,
      searchValue: '',
      searchValue3: '',
      printers: [],
      printerName: '未设置',
      printerNameTo: '未设置',
      printerId: '未设置',
      printerId3: '未设置',
      printer: {},
      searchedList: [],
      searchedList3: [],
      printerSelId: null,
      userLodopModel: null,
      resources: {
        /*eslint-disable*/
        bgTop: require('@/assets/img/system/sysem_bg_top.png'),
        print: require('@/assets/img/system/icon_print.png'),
        help: require('@/assets/img/system/icon_help.png'),
        helpBlue: require('@/assets/img/system/icon_help_blue.png'),
        exit: require('@/assets/img/system/icon_exit.png'),
      },
    }
  },
  computed: {
    //用户头像
    avatarUrl() {
      let avatarUrl = this.utils.getCurrentUser().thumbnailImageUrl
      if (avatarUrl === undefined || avatarUrl === null) {
        // eslint-disable-next-line global-require
        avatarUrl = require('@/assets/img/home/user-default.png')
      }
      return avatarUrl
    },
    //用户头像
    isCallAndroid() {
      return false
    }
  },
  methods: {

    //按钮事件
    btnOp(key) {
      //振动效果
      this.utils.vibrate()
      switch (key) {
        //退出登录
        case 3:
          this.$dialog.confirm({
            title: '系统提示',
            message: '确定退出登录么',
          })
            .then(() => {
              this.$store.dispatch('logout')
            }).catch(() => {})
          break
        //退出登录
        case 4:
          this.$dialog.confirm({
            title: '系统提示',
            message: '确定重新选择服务器么',
          })
            .then(() => {
              localStorage.removeItem('ms_username')
              localStorage.removeItem('autologin')
              localStorage.removeItem('appAuthorization')
              window.callAndroid.androidBack()
            }).catch(() => {})
          break

        //选择打印机
        case 22:
          this.selectVisible = true
          break
        //选择打印机
        case 44:
          this.selectVisible3 = true
          this.initPrint()
          break
        default:
          this.$notify.warning('暂未实现该功能')
      }
    },

    //全局搜索
    handlePageSearch(key) {
      this.searchedList = this.printers.filter(ob => ob.name.indexOf(this.searchValue) > -1
        || this.pyutils.getAllFirstLetter(ob.name).toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
        || this.pyutils.chineseToPinYin(ob.name).toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1)
    },

    //全局搜索
    handlePageSearch3(key) {
      this.searchedList3 = this.printers.filter(ob => ob.name.indexOf(this.searchValue) > -1
        || this.pyutils.getAllFirstLetter(ob.name).toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1
        || this.pyutils.chineseToPinYin(ob.name).toLowerCase().indexOf(this.searchValue.toLowerCase()) > -1)
    },

    //选择完打印服务器
    printCheckChange(id, isInit){
      this.printer = this.printers.find(item => item.id == id)
      this.printerName = this.printer.name
      this.printerId = this.printer.id
      localStorage.setItem('printer_label_id', id)
      localStorage.setItem('printer_label_type_key', this.printer.typeKey)
      localStorage.setItem('printer_label_server_url', this.printer.url)
      this.selectVisible = false

      console.log('this.printer', this.printer)

      //typeKey
      if (this.printer.typeKey == 'label' && isInit != true) {
        // this.selectVisible3 = true
        this.initPrint()
      }
    },
    //选择完打印服务器
    printCheckChange2(item, isInit){
      this.printCheckChange(item.id)
    },

    //选择完打印机
    printCheckChange3(id){
      let printer_label_id = localStorage.getItem('printer_label_id')
      if (this.strings.isBlank(printer_label_id)) {
        this.$notify.warning('请先选择打印服务器')
        return
      }
      this.selectVisible3 = false
      this.printerNameTo = id
      localStorage.setItem('printer_label_print_name', this.printerNameTo)
    },
    //选择完打印机
    printCheckChange33(item){
      this.printCheckChange3(item.name)
    },

    //查询打印机列表
    getPrinters() {
      let wrapper = this.$newWrapper()
      wrapper.eq('typeKey', 'rfid').or('typeKey', 'label')
      const params = {
        queryString: JSON.stringify(wrapper.queryConditions)
      }
      this.$ajax.get('/sys/printer/list',{params}).then(resp => {
        if (resp.code == 0) {
          this.printers = resp.data
          this.searchedList = resp.data
          console.log('searchedList', this.searchedList)
          if (!this.printers || this.printers.length <1) {
            Dialog.alert({
              title: '系统提示',
              message: '未找到可用标签打印机配置，请联系运营人员到【SPD电脑端 系统管理-->打印机管理】进行维护!',
            })
            return
          }
          //设置默认
          let printer_label_id = localStorage.getItem('printer_label_id')
          let printerOb = this.printers.find(item => item.id == printer_label_id)
          printer_label_id = printerOb ? printerOb.id : null
          if(!printer_label_id ) printer_label_id= this.printers[0].id
          this.printerSelId = printer_label_id
          this.printCheckChange(printer_label_id, true)


          let printer_label_print_name = localStorage.getItem('printer_label_print_name')
          if (printer_label_print_name) this.printerNameTo = printer_label_print_name
        }
      })
    },

    //获取打印机列表
    async initPrint(){
      await global.utilPrint.isNeedCLodopfuncs(this.printer.url)

      setTimeout(() => {
        var param={
          checkUsable:true
        }
        this.userLodopModel = new window.LodopModel(param);
        if(!this.userLodopModel.lodop){
          Dialog.alert({
            title: '系统提示',
            message: '未发现可用的打印服务!',
          })
          return
        } else {
          //打印机列表
          this.searchedList3 = this.userLodopModel.getPrinters()
        }
      }, 1000)
    },
    handleBackHome() {
      this.utils.vibrate()
      this.$store.commit('SET_WORKBENCH_ROUTE', { name: 'dashboard' })
    },
  },
  mounted() {
    //加载打印机
    this.getPrinters()
    this.user = this.utils.getCurrentUser().user
  }
}
</script>

<style lang="scss" >
  @import '../../styles/version1/system_index.scss';
</style>
